<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" width="800px" :destroy-on-close="true" title="订单详情" v-loading="loading" :close-on-click-modal="false">

        <el-descriptions class="margin-top" :column="3" title="订单信息">
            <el-descriptions-item label="订单编号">{{ currentItem.order_no }}</el-descriptions-item>

            <el-descriptions-item label="创建时间">{{ currentItem.created_at }}</el-descriptions-item>
            <el-descriptions-item label="用户备注">{{ currentItem.user_remark || '无' }}</el-descriptions-item>
            <el-descriptions-item label="管理员备注">
                {{ currentItem.admin_remark || '无' }}
                <el-button size="mini" type="text" @click="editAdminRemarkHandle()" v-if="btns.create_remark"
                    style="padding: 0 5px;">写备注</el-button>
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" :column="3" title="商品信息">
            <el-descriptions-item label="商品名称">{{ currentItem.goods_info.name }}</el-descriptions-item>
            <el-descriptions-item label="商品类型">{{ currentItem.goods_info.category }}</el-descriptions-item>
            <el-descriptions-item label="商品规格">{{ currentItem.goods_info.goods_standards.standards
                }}</el-descriptions-item>
            <el-descriptions-item label="商品积分">{{ currentItem.pay_amount }}</el-descriptions-item>
            <el-descriptions-item label="商品数量">{{ currentItem.goods_count }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" :column="3" title="用户信息">
            <el-descriptions-item label="用户昵称">{{ currentItem.user.name }}</el-descriptions-item>
            <el-descriptions-item label="绑定手机">{{ currentItem.user.mobile }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" :column="3" title="收货信息">
            <el-descriptions-item label="收货人">{{ currentItem.user_name }}</el-descriptions-item>
            <el-descriptions-item label="收货电话">{{ currentItem.user_phone }}</el-descriptions-item>
            <el-descriptions-item label="物流状态">
                <el-tag size="mini" :type="orderStatusType(currentItem.status)">{{
                    orderStatus(currentItem.status) }}</el-tag>
                <el-button v-if="currentItem.status == 1 && btns.update_delivery" size="mini" type="text" @click="submitDeliveryHandle"
                    style="padding: 0 5px;">去发货</el-button>
            </el-descriptions-item>
            <el-descriptions-item label="收货地址">{{ currentItem.user_address }}</el-descriptions-item>

        </el-descriptions>

        <el-descriptions class="margin-top" :column="3" title="快递信息"
            v-if="currentItem.status == 2 || currentItem.status == 3">
            <template slot="extra">
                <el-button v-if="currentItem.status == 2 && btns.update_delivery" type="text" size="mini" @click="submitDeliveryHandle">修改</el-button>
            </template>
            <el-descriptions-item label="快递公司">{{ currentItem.delivery_name }}</el-descriptions-item>
            <el-descriptions-item label="快递单号">{{ currentItem.delivery_no }}</el-descriptions-item>
        </el-descriptions>

        <delivery-form ref="deliveryForm" @change="loadOrderData"></delivery-form>

    </el-dialog>
</template>

<script>
import { status } from "nprogress";
import deliveryForm from "./deliveryForm.vue";
import {
    getScoreOrderById,
    addAdminRemark,
    delivery,
} from "@/api/score-order";
export default {
    name: "itemForm",
    components: { deliveryForm },

    data() {
        return {
            currentItem: {},
            show: false,
            loading: false,
        };
    },
    props: {
        btns: { type: Object, default: {} },
    },
    computed: {
        canSubmit: function () {
            var h = this.currentItem;
            if (h.desc && h.name && h.expired_at) {
                return true;
            }
            return false;
        },

    },
    watch: {},
    methods: {
        openDialog: function (item) {
            this.currentItem = item;

            this.show = true;
        },

        cancleHandle: function () {
            this.show = false;
            this.currentItem = {};
        },
        submitHandle: function () {

            return this.doUpdate();
        },
        orderStatus(i) {
            switch (i) {
                case 1:
                    return '待发货';
                case 2:
                    return '待收货';
                case 3:
                    return '已完成';
                case 4:
                    return '申请退货';
                case 5:
                    return '已退货';
                case 6:
                    return '驳回退货申请';
                default:
                    return '未知状态';
            }
        },
        orderStatusType(i) {
            switch (i) {
                case 1:
                    return 'warning';
                case 2:
                    return 'primary';
                case 3:
                    return 'success';
                case 4:
                    return 'danger';
                case 5:
                    return 'info';
                case 6:
                    return 'primary';
                default:
                    return 'info';
            }
        },

        submitDeliveryHandle() {
            var data = {
                id: this.currentItem.id,
                delivery_company: this.currentItem.delivery_company,
                delivery_no: this.currentItem.delivery_no,
                status: this.currentItem.status
            }
            this.$refs.deliveryForm.openDialog(data)
        },

        doUpdate: function () {
            var _this = this;
            this.loading = true;
            addAdminRemark(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    _this.$message.success("保存成功");
                    _this.$emit("change", {});
                    this.show = false;
                    _this.loading = false;
                }
            });
        },

        validate: function (data) {
            return true;
        },

        loadOrderData() {
            this.loading = true;
            var id = this.currentItem.id;
            getScoreOrderById(id).then((resp) => {
                this.loading = false;
                if (resp.code != 0) {
                    return
                }
                this.currentItem = resp.data;
            })
        },


        editAdminRemarkHandle() {
            var _this = this
            this.$prompt('', '请输入备注', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputErrorMessage: '数据不能为空',
                closeOnClickModal: false,
                inputValue: _this.currentItem.admin_remark,
                inputType: 'textarea',
            }).then(({ value }) => {
                var data = {
                    id: this.currentItem.id,
                    remark: value
                }

                addAdminRemark(data).then((resp) => {
                    this.loading = false;
                    if (resp.status == 0) {
                        _this.$message.success("保存成功");
                        _this.currentItem.admin_remark = value
                    }
                });

            })
        },

    },
};
</script>

<style scoped>
.tips ul {
    padding: 0;
    margin: 0;
}

.tips {
    font-size: 12px;
    color: #999;
}

.show-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.icon-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #f4f4f4;
}

.icon-uploader .el-upload {
    width: 100%;
    height: 100%;
}
</style>
